<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['id', 'xData', 'yData'],
  name: '',
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  created() {},
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption({
        grid: {
          show: true, //是否显示图表背景网格
          left: '5%', //图表距离容器左侧多少距离
          right: '5%', //图表距离容器右侧侧多少距离
          bottom: '5%', //图表距离容器上面多少距离
          top: '5%', //图表距离容器下面多少距离
          containLabel: true,
          borderWidth: 0
        },
        tooltip: {
          //提示框组件
          trigger: 'axis',
          axisPointer: {
            type: 'none' //虚线隐藏
          },
          formatter: function (params) {
            //提示内容
            var relVal = ''
            relVal = params[0].name + '坝 : ' + params[0].value.toLocaleString() + '个'
            return relVal
          }
        },
        xAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: '#fff'
            }
          },
          type: 'category',
          data: this.xData
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            data: this.yData,
            type: 'bar',
            barWidth: 30
          }
        ]
      })
      // window.addEventListener('resize', function () {
      //     myChart.resize();
      // });
    }
  }
}
</script>
<style></style>